<template>
  <div>
    <div id="map" ref="mapView"></div>
  </div>
</template>
<script>
import axios from 'axios'
import TileLayer from '@arcgis/core/layers/TileLayer'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Point from '@arcgis/core/geometry/Point'

const serviceUrl = 'http://220.171.54.19:6080/arcgis/rest/services/ZHGW/ZT_Tile_ZWWW_Blue_Label/MapServer/';


export default {
  name: 'TestMap',
  data() {
    return {
      view: null
    }
  },
  mounted() {
    this.getMap()
  },
  methods: {
    getMap() {
      const mapImageLayer = new TileLayer(serviceUrl, null);
      const map = new Map();
      map.layers.add(mapImageLayer);

      this.view = new MapView({
        container: "map",
        map: map,
        zoom: 4
      });
      // this.view.when(() => {
      //   this.getCenter().then(res => {
      //     this.view.center = res
      //   });
      // })
      this.view.on('click', (event) => {
        console.log(event)
      })

    },
    getCenter() {
      return new Promise((resolve, reject) => {
        this.getRequest().get(serviceUrl + '?f=json').then(res => {
          let urlData = res.data;
          var pointArr = [new Point(urlData.fullExtent.xmin, urlData.fullExtent.ymin, urlData.fullExtent.spatialReference), new Point(urlData.fullExtent.xmax, urlData.fullExtent.ymax, urlData.fullExtent.spatialReference)];
          var lng1 = parseFloat(pointArr[0].x);
          var lat1 = parseFloat(pointArr[0].y);

          var lng2 = parseFloat(pointArr[1].x);
          var lat2 = parseFloat(pointArr[1].y);

          var lngca = (Math.max(lng1, lng2) - Math.min(lng1, lng2)) / 2;
          var latca = (Math.max(lat1, lat2) - Math.min(lat1, lat2)) / 2;

          var lngcenter = Math.min(lng1, lng2) + lngca;
          var latcenter = Math.min(lat1, lat2) + latca;
          resolve(new Point(lngcenter, latcenter, this.view.spatialReference))
        })

      })
    },
    getRequest() {
      const service = axios.create({
        // axios中请求配置有baseURL选项，表示请求URL公共部分
        baseURL: process.env.VUE_APP_BASE_API,
        // 超时
        timeout: 60 * 1000
      })
      return service;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "/arcgis_assets/esri/themes/light/main.css";

#map {
  width: 100vw;
  height: 100vh;
}
</style>